<template>
    <div class="productMain">
        <common-header />
        <div class="w">
            <div class="categoryDisplay">
                <div class="wInner">
                    <div class="boyClose">
                        <span v-if="spuData.categoryName1">{{spuData.categoryName1}}></span>
                        <span v-if="spuData.categoryName2">{{spuData.categoryName2}}></span>
                        <span v-if="spuData.categoryName3">{{spuData.categoryName3}}></span>
                        <span v-if="spuData.brandName">{{spuData.brandName}}></span><span :title="spuData.title">{{spuData.title}}</span>
                    </div>
                </div>
            </div>
            <div class="mainBody">
                <div class="productImage">
                    <el-skeleton style="min-width: 250px;min-height: 250px" v-if="!isShowDetial" :rows="6" animated />
                    <img :src="curMainImage" v-if="isShowDetial" style="min-width: 200px;min-height: 200px" />
                    <el-skeleton style="min-width: 250px;min-height: 50px" v-if="!isShowDetial" :rows="2" animated />
                    <ul v-if="isShowDetial">
                        <li></li>
                        <li v-for="(item,index) in currentImages" v-show="index<5" style="" @click="showMainPic(index)" @mouseover="showMainPic(index)" :key="index">
                            <img :src="item" width="54px" height="54px" />
                        </li>
                        <li></li>
                    </ul>
                </div>
                <el-skeleton style="min-width: 250px;min-height: 50px;width: 100%" v-if="!isShowDetial" :rows="10" animated />
                <div class="productInfo" v-if="isShowDetial">
                    <div class="title">{{spuData.title}}</div>
                    <div class="subTitle">{{spuData.subTitle}}</div>
                    <div class="jdPrice">
                        <span class="priceTitle">商品价格：</span>
                        <span class="priceContent">￥{{currentSku.price}}</span>
                    </div>
                    <div class="locationClass">
                        <common-position ref="commonPositionRef" />
                    </div>
                    <div class="specParams">
                        <ul>
                            <li v-for="(item,indexKey) in specParams" :key="indexKey">
                                <div class="specTitle">
                                    <div>选择{{item.k}}:</div>
                                </div>
                                <div class="specContent">
                                    <ul>
                                        <li @click="onSelectParams(item.k,index)" :key="index" v-for="(option,index) in item.options" :class="{isParamActive:selectParamsMap[item.k]==index}">
                                            {{option.v}}<img width="40px" height="30px" style="margin-top:5px;margin-left:8px;border-radius: 2px" v-if="option.imgUrl" :src="option.imgUrl" />
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="addToCartClass" v-if="isShowDetial" title="点击进购物车结算">
                        <el-input-number v-model="skuQty" @change="handleChange" :min="1" :max="2000" label="描述文字"></el-input-number>
                        <span class="cartButton" @click="addToCart">加入购物车</span>
                    </div>
                </div>
                <el-skeleton style="min-width: 250px;min-height: 50px;width: 100%" v-if="!isShowDetial" :rows="10" animated />
                <div class="recommondGoods" v-if="isShowDetial">

                </div>
            </div>
            <div class="goodsDesc">
                <el-skeleton style="width: 100%" v-if="!isShowDetial" :rows="20" animated />
                <div class="goodsDescLeft" v-if="isShowDetial">
                    <div class="shopName">
                        <h3>为您推荐</h3>
                    </div>
                    <el-skeleton v-if="!isShowRecommonds" :rows="20" animated />
                    <common-recommonds v-if="isShowRecommonds" :params="dataParams" />
                </div>
                <div class="goodsDescRight" v-if="isShowDetial">
                    <div class="goodsDescNav">
                        <ul>
                            <li :key="index" v-for="(item,index) in goodsDescTab" :class="{isDescActive:selected==index}" @click="change(index)">
                                {{item.name}}
                            </li>
                        </ul>
                    </div>
                    <div class="goodsDescContent" v-if="selected==0">
                        <el-skeleton style="width: 100%" v-if="!isShowRecommonds" :rows="40" animated />
                        <div class="baseParams"></div>
                        <div v-if="isShowRecommonds" v-html="spuData.spuDetialVO&&spuData.spuDetialVO.description"></div>
                    </div>
                    <div class="paramsValue" v-if="selected==1">详细规格参数</div>
                    <div class="afterService" v-if="selected==2">售后服务</div>
                    <div class="commonts" v-if="selected==3">商品评价</div>
                    <div class="commonts" v-if="selected==4">本店好评商品</div>
                </div>
            </div>
            <common-footer />
        </div>
    </div>
</template>

<script lang="ts">
    import { Component, Vue, Prop } from 'vue-property-decorator'
    import { Action, Getter } from 'vuex-class';
    import Header from "@/components/portal-index/customer-portal/header/index.vue";
    import Footer from "@/components/portal-index/customer-portal/footer/index.vue";
    import Position from "@/components/common/position.vue";
    import Recommonds from "@/components/portal-index/customer-portal/recommonds/index.vue";
    import _ from "lodash";
    import CustomerApiActions from '@/components/api/customer-api-actions';
    import { namespace } from 'vuex-class'
    const goodsName = namespace("goods");
    const cartName = namespace("cart");
    @Component({
        components: {
            CommonHeader: Header,
            CommonFooter: Footer,
            CommonPosition: Position,
            CommonRecommonds: Recommonds
        }
    })
    export default class ProductDetialIndex extends Vue {
        @Prop() params: any;
        public dataParams: any = {};
        @goodsName.Mutation updateState;
        @cartName.Mutation updateCartState;
        public isShowDetial: boolean = false;
        public selectParamsMap: any = {};
        public spuData: any = {};
        public currentSku: any = {};
        public currentImages: Array < any >= [];
        public specParams = new Array < any > ();
        public skuQty: any = 0;
        public selected = 0;
        public skuSelect = "";
        public isShowRecommonds: boolean = false;
        public curMainImage: any = "";
        public goodsDescTab = [
            { name: "商品介绍" },
            { name: "规格与包装" },
            { name: "售后保障" },
            { name: "商品评价" },
            { name: "本店好评商品" }
        ]
        public isShowPosition: boolean = false;
        async created() {
            let spuId: any = this.$route.query.id;
            let apiActions = new CustomerApiActions(this);
            let result: any = await apiActions.selectProduct({ id: spuId });
            this.spuData = result.data;
            this.currentSku = this.spuData.skus[0];
            this.currentImages = this.currentSku.images.split(",");
            this.curMainImage = this.currentImages[0];
            let editData: any = JSON.parse(this.spuData.spuDetialVO.specifications);
            editData.groupParams.forEach(groupParam => {
                let params = groupParam.params.filter(item => !item.generic);;
                this.specParams.push(...params);
            });
            editData.params.forEach(param => {
                if (!param.generic) {
                    this.specParams.push(param);
                }
            });
            this.specParams = _.uniqBy(this.specParams, 'k');
            this.specParams.forEach(item => {
                Vue.set(this.selectParamsMap, item.k, -1)
            });
            this.specParams.forEach((item, index) => {
                item.options.forEach(op => {
                    //获取sku库存信息
                    let sluItem: any = this.spuData.skus.find(sku => {
                        let skuIndexArray: Array < any >= sku.indexes.split("-");
                        let sluIndex = skuIndexArray[index];
                        if (sluIndex == op.index) {
                            return true;
                        }
                        return false;
                    });
                    if (sluItem && sluItem.images && index == 0) {
                        op.imgUrl = sluItem.images.split(",")[0];
                    }
                });
            });
            this.isShowDetial = true;
            let curPage: any = Math.floor(Math.random() * 10) + 1;
            let recommdGoods: any = await apiActions.getSpuListPage({ title: "", pager: { pageSize: 8, currentPage: curPage } });
            this.dataParams.recommondsData = recommdGoods.data.rows;
            this.isShowRecommonds = true;
        }

        public showMainPic(index: any) {
            if (this.selectParamsMap[Object.keys(this.selectParamsMap)[0]] != -1) {
                let curSku: any = this.getCurrentSku();
                this.curMainImage = curSku.images.split(",")[index];
            } else {
                let curSku: any = this.spuData.skus[0];
                this.curMainImage = curSku.images.split(",")[index];
            }
        }
        public handleChange() {

        }
        public change(index) {
            this.selected = index;
        }
        //选择规格参数
        public onSelectParams(key: any, selectValue: any) {
            this.selectParamsMap[key] = selectValue;
            let curSku: any = this.getCurrentSkuNoTips();
            this.currentImages = curSku.images.split(",");
            this.curMainImage = curSku.images.split(",")[0];
        }
        public getCurrentSku() {
            let skuIndex = "";
            for (let key in this.selectParamsMap) {
                let selectValue: any = this.selectParamsMap[key];
                skuIndex = skuIndex + selectValue + "-";
                if (selectValue < 0) {
                    this.$alert('请选择规格参数', '', {
                        dangerouslyUseHTMLString: true
                    });
                    return false;
                }
            };
            skuIndex = skuIndex.substring(0, skuIndex.length - 1);
            //如果成功的话就获取到了sku
            let curSku: any = this.spuData.skus.find(item => item.indexes == skuIndex);
            return curSku;
        }
        public getCurrentSkuNoTips() {
            let skuIndex = "";
            for (let key in this.selectParamsMap) {
                let selectValue: any = this.selectParamsMap[key];
                skuIndex = skuIndex + selectValue + "-";
            };
            skuIndex = skuIndex.substring(0, skuIndex.length - 1);
            //如果成功的话就获取到了sku
            let curSku: any = this.spuData.skus.find(item => item.indexes == skuIndex);
            return curSku;
        }
        //加入购物车
        public async addToCart() {
            let apiActions = new CustomerApiActions(this);
            let positionStr = (this.$refs.commonPositionRef as any).positionStr;
            if (!positionStr) {
                this.$alert('请选择收货地址', '', {
                    dangerouslyUseHTMLString: true
                });
                return;
            }
            let curSku: any = this.getCurrentSku();
            if (!curSku) {
                return false;
            }
            let cartItems: Array < any >= new Array < any > ();
            let spuId: any = this.$route.query.id;
            let skuItem: any = {
                skuId: curSku.id,
                title: curSku.title,
                images: curSku.images,
                qty: 1,
                ownSpecDesc: curSku.ownSpecDesc,
                price: curSku.price,
                spuId: spuId
            }
            let userCartInfo = await apiActions.getUserCart([]);
            if (!userCartInfo) {
                return false;
            }
            if (userCartInfo.data == 403) {
                return false;
            }
            let addUserCartInfo = await apiActions.addToCart(skuItem);
            this.updateCartState({ currentAddSkuId: skuItem.skuId });
            let loginUser: any = JSON.parse(localStorage.getItem("loginUser"));
            let cart: Array < any >= JSON.parse(localStorage.getItem("cart"));
            if (cart) {
                let cartItems = JSON.parse(localStorage.getItem("cart"));
                let curItem = cartItems.find(item => item.id == curSku.id);
                if (!curItem) {
                    cartItems.push(skuItem);
                } else {
                    curItem.qty = curItem.qty + this.skuQty;
                }
                this.updateState({ cartItemsCount: cartItems.length });
                localStorage.setItem("cart", JSON.stringify(cartItems));
            } else {
                cartItems.push(skuItem);
                let cartItemStr: any = JSON.stringify(cartItems);
                this.updateState({ cartItemsCount: cartItems.length });
                localStorage.setItem("cart", cartItemStr);
            }

            let params: any = {};
            try {
                this.$router.push({
                    path: 'add/cart/success',
                });
            } catch (e) {
                localStorage.setItem("loginUser", null);
            }

        }
    }
</script>

<style lang="less">
    #app {
        overflow: auto;
    }

    .productMain {
        height: 100%;
        overflow: auto;

        .categoryDisplay {
            width: 100%;
            height: 40px;
            background: #f2f2f2;
        }

        .w {
            margin: auto;
            display: flex;
            flex-direction: column;
            background-color: white;

            .mainBody {
                font-size: 12px;
                width: 1190px;
                margin: auto;
                margin-top: 10px;
                margin-bottom: 20px;
                background-color: white;
                display: flex;
                flex-direction: row;

                .productImage {
                    ul {
                        display: flex;
                        flex-direction: row;
                        margin: 0px;
                        padding: 0px;
                        flex-wrap: wrap;
                        justify-content: space-between;

                        li {
                            width: 54px;
                            height: 54px;
                            list-style-type: none;
                            background-color: beige;
                            cursor: pointer;
                        }

                        li:hover {
                            border: 1px solid red;
                        }

                        li:nth-child(1) {
                            width: 15px;
                        }

                        li:nth-last-child(1) {
                            width: 18px;
                        }
                    }
                }

                .productInfo {
                    flex: 1;
                    margin-left: 60px;

                    .title {
                        font: 700 16px Arial, "microsoft yahei";
                        color: #666;
                        margin-bottom: 5px;
                    }

                    .subTitle {
                        margin-bottom: 5px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 618px;
                        max-height: 1.5em;
                        line-height: 1.5em;
                        color: #e4393c;
                        margin-bottom: 5px;
                    }

                    .jdPrice {
                        height: 45px;
                        margin-top: 10px;
                        background: #f3f3f3;
                        display: flex;
                        align-items: center;

                        .priceTitle {
                            line-height: 22px;
                            float: left;
                            padding-left: 10px;
                            font-family: simsun;
                            color: #999;
                        }

                        .priceContent {
                            color: #e4393c;
                            font-family: "microsoft yahei";
                            margin-right: 10px;
                            font-size: 22px;
                        }
                    }

                    .locationClass {
                        flex: 1;
                        height: 30px;
                        display: flex;
                        margin-top: 10px;

                        .locationClasstitle {
                            line-height: 26px;
                            padding-left: 10px;
                            font-family: simsun;
                            color: #999;
                        }

                        .hasGoods {
                            line-height: 26px;
                            padding-left: 10px;
                            font-family: simsun;
                            color: #999;
                        }

                        .selectLocation {
                            position: relative;
                            height: 26px;
                            line-height: 26px;
                            margin-left: 10px;
                            width: 150px;
                            background: #fff;
                            border: 1px solid #CECBCE;
                            line-height: 23px;
                            overflow: hidden;
                        }
                    }

                    .specParams {
                        margin-top: 10px;

                        ul {
                            margin: 0px;
                            padding: 0px;

                            li {
                                list-style-type: none;
                                display: flex;
                                flex-direction: row;

                                .specContent {
                                    display: flex;
                                    flex: 1;

                                    ul {
                                        margin: 0px;
                                        padding: 0px;
                                        display: flex;
                                        flex-direction: row;
                                        justify-content: flex-start;
                                        flex-wrap: wrap;

                                        li {
                                            list-style-type: none;
                                            height: 40px;
                                            line-height: 40px;
                                            border: 1px solid #ccc;
                                            padding: 0 8px;
                                            background-color: #f7f7f7;
                                            cursor: pointer;
                                            white-space: nowrap;
                                            margin-left: 10px;
                                            margin-top: 10px;
                                            border-radius: 2px;
                                        }
                                    }
                                }

                                .specTitle {
                                    padding-left: 10px;
                                    font-family: simsun;
                                    color: #999;
                                    height: 40px;
                                    line-height: 40px;
                                }
                            }
                        }
                    }

                    .addToCartClass {
                        display: flex;
                        align-items: center;
                        flex-direction: row;
                        margin-left: 75px;
                        margin-top: 20px;

                        .cartButton {
                            height: 26px;
                            line-height: 26px;
                            padding: 10px 26px;
                            font-size: 18px;
                            display: inline-block;
                            font-family: "microsoft yahei";
                            background-color: #df3033;
                            color: #fff;
                            margin-left: 20px;
                            border-radius: 3px;
                            cursor: pointer;
                        }

                        .el-input-number__decrease,
                        .el-input-number__increase {
                            width: 25px !important;
                            height: 45px;
                        }

                        .el-input-number {
                            width: 120px !important;
                        }

                        .el-input-number .el-input__inner {
                            padding-left: 5px;
                            padding-right: 5px;
                            text-align: center;
                            height: 47px;
                        }
                    }
                }

                .recommondGoods {
                    width: 210px;
                }
            }
        }

        .wInner {
            width: 1190px;
            margin: auto;
            height: 100%;

            .boyClose {
                width: 352px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: inline-block;
                line-height: 40px;

                span {
                    cursor: pointer;
                }
            }
        }

        .goodsDesc {
            display: flex;
            flex-direction: row;
            width: 1190px;
            margin: auto;

            .goodsDescLeft {
                width: 200px;

                .shopName {
                    background-color: #f7f7f7;
                    border: 1px solid #eee;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 3px;

                    h3 {
                        padding: 0px;
                        margin: 0px;
                        margin-left: 10px;
                    }
                }
            }

            .goodsDescRight {
                margin-left: 10px;
                flex: 1;

                .goodsDescNav {
                    ul {
                        margin: 0px;
                        padding: 0px;
                        display: flex;
                        flex-direction: row;
                        background-color: #f7f7f7;
                        border: 1px solid #eee;
                        border-bottom: 1px solid #e4393c;

                        li {
                            list-style-type: none;
                            padding: 10px 25px;
                            font-size: 14px;
                            cursor: pointer;
                        }
                    }
                }
            }

            .goodsDescContent {
                .baseParams {
                    width: 100%;
                }

                img {
                    width: 100%;
                }
            }

            .isDescActive {
                background-color: #e4393c;
                color: #fff;
            }

            .paramsValue {
                height: 500px;
            }

            .afterService {
                height: 500px;
            }

            .footerIndexMain {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: stretch;
            }
        }

    }

    .isParamActive {
        border: 1px solid #e4393c !important;
    }
</style>